<template>
	<view>
		<np-navbar ref="navBar" :scrollTop="scrollTop"
		 :titleCenter="false" :bgColor="navbarColorList" bgColorAngle="90" fontColor="#FFFFFF" type="transparentFixed" slotHeight="188">
			<text>{{pagename}}</text>
			<view slot="view" :style="{ opacity: transparent, height: transparent ? '188rpx' : '0' }">
				<np-tab v-model="tabIndex" textColor="#FFFFFF" :tabWidth="100" :tabs="tabs" @change="tabChange"></np-tab>
				<view class="top-tabbar-height"></view>
				<first-sort v-show="transparent" v-model="sortType" :whiteBg="true" @click="sortClick"></first-sort>
				<first-money v-show="transparent"  v-model="firstMoney" :whiteBg="true" @click="moneyClick"></first-money>
			</view>
		</np-navbar>
		<block v-if="globalConfig.wechat_mod == 0">
			<view class="view">
				<text>功能下架</text>
			</view>
		</block>
		<block v-if="globalConfig.wechat_mod == 1">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			 @emptyclick="downCallback" @topclick="topClick">
				<view class="header">
					<image class="header-bg" src="/static/images/first/bg.png"></image>
					<view class="header-info">
						<view class="box">
							<video v-if="video" id="GoodVideo" class="video" :autoplay="true" :src="video" :show-fullscreen-btn="true" :controls="true"></video>
							<image v-else class="help-image" src="/static/images/first/ht.png" @click="toHelp(1)"></image>
						</view>
						<view class="box">
							<view class="help">
								<view class="help-text" @click="toHelp(2)">
									<text>{{pagename}} 玩法指南>></text>
								</view>
								<view class="btn-list">
									<view class="btn-item btn1" @click="getLj(0)">领取{{pagename}}</view>
									<view class="btn-item btn2" @click="getLj(1)">领{{subname}}</view>
								</view>
							</view>
						</view>
					</view>
					<image class="footer-bg" src="/static/images/first/foot.png"></image>
				</view>
				<view class="body-tabbar-height"></view>
				<view id="tabInList" class="tabs">
					<np-tab v-model="tabIndex" :textColor="'#fb515e'" :tabWidth="100" :tabs="tabs"
					 @change="tabChange"></np-tab>
					<view class="top-tabbar-height"></view>
					<first-sort v-model="sortType" @click="sortClick"></first-sort>
					<first-money v-model="firstMoney" @click="moneyClick"></first-money>
					<view class="top-tabbar-height"></view>
				</view>
				<np-list-one :goodsList="goods"></np-list-one>
			</mescroll-body>
			<uni-popup ref="copytip" type="center" :animation="true">
				<view class="np-copy-tip">
					<view class="np-tip-header">
						<text class="np-header-icon npIcon-success"></text>
					</view>
					<view class="tip-box">
						<text class="tip-title">{{tipTitle}}</text>
						<text class="tip-content">{{tipContent}}</text>
					</view>
				</view>
			</uni-popup>
		</block>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import firstSort from './components/firstSort.vue'
	import firstMoney from './components/firstMoney.vue'
	let loading = false;
	export default {
		mixins: [base, MescrollMixin],
		components: {firstSort, firstMoney},
		data() {
			return {
				scrollTop: 0,
				navbarColorList: ['#f92b43', '#fb505e'],
				tabs: this.$settingData.hdkMenu,
				tabsLoad: false,
				tabIndex: 0,
				preIndex: 0,
				navTop: null,
				isShowSticky: false,
				downOption: {
					textColor: '#777777',
				},
				upOption: {
					textColor: '#777777',
					empty: {
						textColor: '#777777',
						tip: '~ 空空如也 ~',
						btnText: '重新加载'
					},
					noMoreSize: 4,
				},
				firstGoods: [],
				tip: "",
				tipTitle: "",
				tipContent: "",
				help: {},
				video: "",
				pagename: "礼品",
				subname: "备用",
				sortType: 3,
				firstMoney: 5,
				transparent: 0
			}
		},
		onLoad() {
			// #ifdef H5 || APP-PLUS
			this.pagename = '首单礼金';
			this.subname = '备用礼金';
			uni.setNavigationBarTitle({
				title: '首单礼金'
			});
			// #endif
			// #ifndef H5
			if (this.globalConfig.wechat_mod == 1) {
				this.pagename = '首单礼金';
				this.subname = '备用礼金';
				uni.setNavigationBarTitle({
					title: '首单礼金'
				});
			}
			// #endif
			this.getLijin();
		},
		computed: {
			goods() {
				return this.tabs[this.tabIndex].goods
			}
		},
		onShareAppMessage(res) {
			let parentId = this.$config.getParentId();
			if (this.hasLogin) {
				parentId = this.userInfo.id;
			}
			let path = '/pages/list/first?uid=' + parentId;
			let title = '1分购 下单仅需1分钱';
			return {
				title: title,
				path: path,
			};
		},
		methods: {
			moneyClick(e) {
				this.firstMoney = parseInt(e);
				let tabItem = this.tabs[this.tabIndex];
				tabItem.minId = 1;
				tabItem.goods = null;
				tabItem.num = 1;
				tabItem.y = 0;
				tabItem.curPageLen = 0;
				tabItem.hasNext = true;
				this.downCallback();
			},
			sortClick(e) {
				this.sortType = e;
				let tabItem = this.tabs[this.tabIndex];
				tabItem.minId = 1;
				tabItem.goods = null;
				tabItem.num = 1;
				tabItem.y = 0;
				tabItem.curPageLen = 0;
				tabItem.hasNext = true;
				this.downCallback();
			},
			getLijin() {
				this.$http.get('api/default/lijin').then(res => {
					this.firstGoods = res.first;
					this.tip = res.tip;
					this.tipTitle = res.tip_title;
					this.tipContent = res.tip_content;
					this.help = res.help;
					this.video = res.video;
					this.pagename = res.pagename;
					this.subname = res.subname;
					// #ifdef H5
					uni.setNavigationBarTitle({
						title: this.pagename
					});
					// #endif
				}).catch((error) => {
					
				});
			},
			downCallback() {
				let tabItem = this.tabs[this.tabIndex];
				tabItem.minId = 1;
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				if(this.isChangeTab){
					this.mescroll.hideUpScroll();
					uni.showLoading();
				}
				if (loading) {
					this.mescroll.setPageNum(page.num);
					return;
				}
				loading = true;
				let tabItem = this.tabs[this.tabIndex];
				let data = {
					page: page.num,
					id: tabItem.id,
					min_id: tabItem.minId,
					sort_type: this.sortType,
					received_price: this.firstMoney,
					v: 2
				}
				this.$http.get('api/default/firstlj', {
					params: data
				}).then(res => {
					loading = false;
					if (page.num == 1) {
						tabItem.goods = [];
					}
					let goodsList = res.list;
					tabItem.goods = tabItem.goods.concat(res.list);
					setTimeout(() => {
						let curPageLen = res.list.length;
						let hasNext = curPageLen < 10 ? false : true;
						this.mescroll.endSuccess(curPageLen, hasNext);
						tabItem.num = page.num;
						tabItem.minId = res.min_id;
						tabItem.curPageLen = curPageLen;
						tabItem.hasNext = hasNext;
						if (!this.navTop) this.setNavTop();
						if (this.isChangeTab) {
							this.isChangeTab = false;
							uni.hideLoading();
							if (this.isShowSticky) this.mescroll.scrollTo(this.navTop, 0)
						}
					}, 500);
				}).catch((error) => {
					loading = false;
					this.mescroll.endErr();
				});
			},
			setNavTop(){
				let statusbar = uni.getSystemInfoSync().statusBarHeight;
				let view = uni.createSelectorQuery().select('#tabInList');
				view.boundingClientRect(data => {
					this.navTop = data.top - statusbar - 44 // 到屏幕顶部的距离
				}).exec();
			},
			topClick(){
				this.isShowSticky = false
			},
			// 切换菜单
			tabChange(index) {
				let preTab = this.tabs[this.preIndex]
				preTab.y = this.mescroll.getScrollTop(); // 滚动条位置
				this.preIndex = index;
				let curTab = this.tabs[index]
				if (!curTab.goods || curTab.goods.length == 0) {
					curTab.minId = 1;
					this.isChangeTab = true;
					this.mescroll.resetUpScroll()
				} else {
					// 初始化过,则恢复之前的列表数据
					this.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
					this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext); // 恢复是否有下一页或显示空布局
					this.$nextTick(() => {
						this.mescroll.scrollTo(curTab.y, 0) // 恢复滚动条的位置
					})
				}
			},
			getLj(e) {
				let item = this.firstGoods[e];
				if (item.link.length == 0) {
					this.$config.toast('获取链接失败');
					return;
				}
				uni.setClipboardData({
					data: item.link.taoword,
					success: (res) => {
						this.$refs.copytip.open();
					},
					fail: (err) => {
						this.$config.toast('未知错误,复制失败');
					}
				});
			},
			toHelp(id) {
				let item = this.help;
				let image = item.help;
				if (id == 2) {
					image = item.question;
				}
				uni.navigateTo({
					url: "/pages/list/help?image=" + decodeURIComponent(image)
				})
			}
		},
		// 使用mescroll-body最简单只需在onPageScroll处理即可
		onPageScroll(e){
			this.scrollTop = e.scrollTop;
			if (e.scrollTop >= this.navTop) {
				this.isShowSticky = true; // 显示悬浮菜单
				this.transparent = 1;
			} else {
				this.isShowSticky = false; // 隐藏悬浮菜单
				this.transparent = 0;
			}
		}
	}
</script>

<style>
	.view {
		display: flex;
		justify-content: center;
		padding-top: 300rpx;
		font-size: 32rpx;
	}
	
	.body-tabbar-height{
		height: 20rpx;
		background: #FFFFFF;
	}
	
	.top-tabbar-height {
		height: 10rpx;
	}
	.header {
		width: 750rpx;
		height: 816rpx;
		background: #fb515e;
		position: relative;
	}
	
	.header-bg {
		width: 100%;
		height: 744rpx;
	}
	
	.footer-bg {
		width: 100%;
		height: 72rpx;
	}
	
	.header-info {
		position: absolute;
		top: 250rpx;
		left: 45rpx;
		right: 45rpx;
	}
	
	.tabs {
		margin-bottom: 10rpx;
		background: #FFFFFF;
	}
	
	.box {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	
	.video {
		width: 650rpx;
		height: 280rpx;
	}
	
	.help {
		width: 100%;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	
	.help-image {
		width: 650rpx;
		height: 280rpx;
		border: 0;
	}
	
	.help-text {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0 20rpx 0;
		font-size: 32rpx;
	}
	
	.btn-list {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.btn-item {
		font-size: 28rpx;
		font-weight: 600;
		padding: 0 35rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 10rpx;
		margin-right: 5rpx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.btn-item:last-child {
		margin-left: 24rpx;
	}
	
	.btn1 {
		background-image: linear-gradient(90deg,#ff1944,#ff4e33);
		color: #FFFFFF;
	}
	
	.btn2 {
		background-image: linear-gradient(90deg,#ff19a6,#c12cff);
		color: #FFFFFF;
	}
	.np-copy-tip {
		width: 550rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
	}
	
	.np-tip-header {
		padding: 20rpx;
	}
	
	.np-header-icon {
		font-size: 160rpx;
		color: #1afa29;
	}
	
	.np-tip-title {
		padding: 0 20rpx 20rpx 20rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.tip-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.tip-content {
		font-size: 24rpx;
		color: #777777;
	}
	
	.tip-title {
		padding: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.np-tip-text {
		padding: 20rpx;
		font-size: 24rpx;
		color: #777777;
	}
</style>
